<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-04 14:57:09
 * @LastEditors: william
 * @LastEditTime: 2025-09-03 17:00:10
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('public.detail')"
    width="850px"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
    >
      <el-descriptions-item
        :rowspan="2"
        width="200"
        style="height: 100px"
        class-name="nw-descriptions-item"
      >
        <template #label>图片</template>
        <el-image
          style="width: 100px; height: 100px"
          :src="g_utils.showImg(formData.picturePath)"
          :preview-src-list="[g_utils.showImg(formData.picturePath)]"
          fit="contain"
          show-progress
          preview-teleported
        />
      </el-descriptions-item>
      <!-- <el-descriptions-item width="200">
        <template #label>食材大类</template>
        {{ formData.name || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>食材小类</template>
        {{ formData.name || '--' }}
      </el-descriptions-item> -->
      <el-descriptions-item width="200">
        <template #label>食材名称</template>
        {{ formData.name || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>食材简介</template>
        {{ formData.introduction || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>营养成分</template>
        {{ formData.ingredient || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>价值功效</template>
        {{ formData.efficacy || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>食用禁忌</template>
        {{ formData.contraindication || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>认识选购</template>
        {{ formData.purchase || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>代表菜谱</template>
        {{ formData.typicalRecipe || '--' }}
      </el-descriptions-item>
      <!-- <el-descriptions-item width="200">
        <template #label>可用状态</template>
        <span>{{
          g_options.getOptionText(
            g_options.recipeStatusOptions,
            formData.status,
            '--'
          )
        }}</span>
      </el-descriptions-item> -->
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.createTime') }}</template>
        {{ formData.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>更新时间</template>
        {{ formData.updateTime || '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const viewLoading = ref(false)
const formData = ref({})

onMounted(() => {
  getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.foodstuff
    .apiMaterialQueryDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
:deep(.nw-descriptions-item) {
  line-height: 0 !important;
}
</style>
